<template>
  <div class="lb-system-other">
    <top-nav />
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="subForm"
        label-width="160px"
      >
        <el-form-item label="最低提现额度" prop="cash_mini">
          <el-input
            v-model="subForm.cash_mini"
            placeholder="请输入最低提现额度"
          ></el-input>
          <lb-tool-tips
            >{{
              $t('action.attendantName')
            }}提现服务订单佣金的最低提现额度</lb-tool-tips
          >
        </el-form-item>
        <el-form-item label="扣税百分点" prop="tax_point">
          <el-input v-model="subForm.tax_point" placeholder="请输入扣税百分点">
            <template slot="append">%</template>
          </el-input>
          <lb-tool-tips
            >设置扣税百分比之后，{{
              $t('action.attendantName')
            }}每笔完成的订单需要扣除税费</lb-tool-tips
          >
        </el-form-item>
        <el-form-item label="平台联系电话" prop="mobile">
          <el-input
            v-model="subForm.mobile"
            placeholder="请输入平台联系电话"
          ></el-input>
          <lb-tool-tips
            >用于客户咨询，请填写有效的联系电话，支持400电话
            <div class="mt-sm">400电话格式：400-xxxxxxx</div>
          </lb-tool-tips>
        </el-form-item>
        <el-form-item label="企业微信客服链接" prop="kf_url">
          <el-input
            v-model="subForm.kf_url"
            placeholder="请输入企业微信客服链接"
          ></el-input>
        </el-form-item>
        <el-form-item label="服务开始语音" prop="service_start_recording">
          <div class="flex-warp">
            <div class="lb-file-input flex-between">
              <div :class="[{ 'c-title': subForm.service_start_recording }]">
                {{ subForm.service_start_recording | handleFileName() }}
              </div>
              <lb-cover
                type="button"
                fileType="audio"
                :fileSize="1"
                @selectedFiles="getFile($event, 'service_start_recording')"
              ></lb-cover>
            </div>
            <lb-tool-tips>
              当{{
                $t('action.attendantName')
              }}点击开始服务时，自动播放此音频文件
            </lb-tool-tips>
          </div>
        </el-form-item>
        <el-form-item label="服务结束倒计时语音" prop="countdown_voice">
          <div class="flex-warp">
            <div class="lb-file-input flex-between">
              <div :class="[{ 'c-title': subForm.countdown_voice }]">
                {{ subForm.countdown_voice | handleFileName() }}
              </div>
              <lb-cover
                type="button"
                fileType="audio"
                :fileSize="1"
                @selectedFiles="getFile($event, 'countdown_voice')"
              ></lb-cover>
            </div>
            <lb-tool-tips>
              <div>
                当{{
                  $t('action.attendantName')
                }}点击开始服务，若订单服务总时长大于5分钟，则距离服务结束5分钟时，自动播放此音频文件
              </div>
              <div class="mt-md">
                1）此音频仅在{{
                  $t('action.attendantName')
                }}端的订单列表页（仅在点击【开始服务】且未退出列表页面时有效）、订单详情页播放
              </div>
              <div class="mt-md">
                2）如有多个订单点击开始服务，则按照时间先后依次播报，当第二个订单到达播报时间时，若第一个订单尚未播报完毕则暂停并重新播报
              </div>
            </lb-tool-tips>
          </div>
        </el-form-item>
        <el-form-item label="服务结束语音" prop="service_end_recording">
          <div class="flex-warp">
            <div class="lb-file-input flex-between">
              <div :class="[{ 'c-title': subForm.service_end_recording }]">
                {{ subForm.service_end_recording | handleFileName() }}
              </div>
              <lb-cover
                type="button"
                fileType="audio"
                :fileSize="1"
                @selectedFiles="getFile($event, 'service_end_recording')"
              ></lb-cover>
            </div>
            <lb-tool-tips>
              当{{ $t('action.attendantName') }}服务结束时，自动播放此音频文件
            </lb-tool-tips>
          </div>
        </el-form-item>
        <el-form-item label="客服类型" prop="im_type">
          <el-radio-group v-model="subForm.im_type">
            <el-radio :label="1">平台电话</el-radio>
            <el-radio :label="2">企业微信客服</el-radio>
          </el-radio-group>
          <lb-tool-tips
            >勾选平台电话，用户可直接拨打平台的电话号码
            <p class="mt-sm">
              勾选企业微信客服会直接对接企业微信客服
            </p>
          </lb-tool-tips>
        </el-form-item>
        <el-form-item label="匿名评价" prop="anonymous_evaluate">
          <el-radio-group v-model="subForm.anonymous_evaluate">
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips
            >开启之后，手机用户端的评价不显示真实头像和真实昵称
          </lb-tool-tips>
        </el-form-item>
        <el-form-item label="是否派单" prop="order_dispatch">
          <el-radio-group v-model="subForm.order_dispatch">
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips
            >开启派单后，{{
              $t('action.attendantName')
            }}拒单，则不会自动给客户进入退款环节，会进入派单环节，由平台客服人员手动派单给其他人员
          </lb-tool-tips>
        </el-form-item>
        <el-form-item
          :label="'客户联系' + $t('action.attendantName')"
          prop="order_contact_coach"
        >
          <el-radio-group v-model="subForm.order_contact_coach">
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips
            >关闭之后，用户在移动端 - 订单详情里，不可以拨打{{
              $t('action.attendantName')
            }}的联系方式
          </lb-tool-tips>
        </el-form-item>
        <el-form-item
          label="服务过程录音"
          prop="service_recording_show"
          v-if="routesItem.auth.recording"
        >
          <el-radio-group v-model="subForm.service_recording_show">
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips
            >开启后，{{
              $t('action.attendantName')
            }}点击开始服务按钮后，将自动录音，直至服务结束
          </lb-tool-tips>
        </el-form-item>
        <el-form-item
          label="增值电信许可"
          prop="is_zzdx"
          v-if="routesItem.auth.recording"
        >
          <el-radio-group v-model="subForm.is_zzdx">
            <el-radio :label="1">{{ $t('action.YES') }}</el-radio>
            <el-radio :label="0">{{ $t('action.NO') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips>
            拥有增值电信许可证才可以使用在线联系、消息中心等功能
          </lb-tool-tips>
        </el-form-item>
        <el-form-item>
          <lb-button @click="submitForm" type="primary" v-preventReClick>{{
            $t('action.submit')
          }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      subForm: {
        cash_mini: '',
        tax_point: '',
        mobile: '',
        service_start_recording: '',
        countdown_voice: '',
        service_end_recording: '',
        im_type: 1,
        anonymous_evaluate: 0,
        order_dispatch: 0,
        order_contact_coach: 0,
        is_zzdx: 0,
        service_recording_show: 0,
        kf_url: ''
      },
      subFormRules: {
        cash_mini: { required: true, validator: this.$reg.isMoney, trigger: 'blur' },
        tax_point: { required: true, validator: this.$reg.isPercent, trigger: 'blur' },
        mobile: { required: true, validator: this.$reg.isAllPhone, trigger: 'blur' },
        kf_url: { required: true, type: 'string', message: '请输入企业微信客服链接', trigger: 'blur' },
        im_type: { required: true, type: 'number', message: '请选择客服类型', trigger: 'blur' },
        anonymous_evaluate: { required: true, type: 'number', message: '请选择匿名评价', trigger: 'blur' },
        order_dispatch: { required: true, type: 'number', message: '请选择是否派单', trigger: 'blur' },
        order_contact_coach: { required: true, type: 'number', message: '请选择客户联系' + this.$t('action.attendantName'), trigger: 'blur' },
        is_zzdx: { required: true, type: 'number', message: '请选择是否拥有增值电信许可证', trigger: 'blur' },
        service_recording_show: { required: true, type: 'number', message: '请选择服务过程录音', trigger: 'blur' }
      }
    }
  },
  created () {
    this.getFormInfo()
  },
  computed: {
    ...mapState({
      routesItem: state => state.routes
    })
  },
  methods: {
    async getFormInfo () {
      let { code, data } = await this.$api.system.configInfo()
      if (code !== 200) return
      for (let key in this.subForm) {
        this.subForm[key] = data[key]
      }
    },
    getFile (file, key) {
      let len = file.length - 1
      this.subForm[key] = file[len].url
    },
    submitForm () {
      this.$refs['subForm'].validate(valid => {
        if (valid) {
          let { subForm } = this
          this.$api.system.configUpdate(subForm).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successSub'))
            }
          })
        }
      })
    }
  },
  filters: {
    handleFileName (url) {
      let text = '请上传文件'
      if (url) {
        text = url.substring(url.lastIndexOf('/') + 1)
      }
      return text
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-system-other {
  width: 100%;

  .el-input,
  .el-select {
    width: 300px;
  }
}
</style>
